<script setup>

import { ref } from 'vue'

const level = ref()

</script>

<template>
<div class="level">
  <h3>医院</h3>
  <div class="content">
    <div class="left">等级：</div>
    <ul class="hospital">
      <li class="active">全部</li>
      <li>三级甲等</li>
      <li>三级乙等</li>
      <li>二级甲等</li>
      <li>二级乙等</li>
      <li>一级甲等</li>
    </ul>
  </div>
</div>
</template>

<style scoped lang="scss">
.level {

  h3 {
    font-weight: 900;
    color: #7f7f7f;
    margin-bottom: 20px;
  }

  .content {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .left {
      margin-right: 10px;
    }

    .hospital {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        margin-right: 15px;
        cursor: pointer;
        color: #7f7f7f;

        &.active {
          color: #03b8ff;
        }
      }

      li:hover {
        color: #03b8ff;
      }
    }
  }
}
</style>